<template>
  <div class="person-style">
    <!-- 导航栏 -->
    <NavBar :title="title" />

    <!-- 附件简历 -->
    <div class="resume-annex">
      <!-- 未上传 -->
      <div class="null" v-if="false">
        <p class="tag">
          <b>上传附件简历</b>
          <span>仅支持 pdf 格式，文件大小5k-8M</span>
        </p>
        <p class="btn">
          <i class="icon"></i>
          <span>从手机文件管理上传</span>
          <van-icon name="arrow" size="16" color="#ccc" />
        </p>
      </div>

      <!-- 已上传 -->
      <div class="exist-show" v-else>
        <div class="switch">
          <span>投递简历时，同时投递你的附件简历</span>
          <van-switch
            v-model="checked"
            size="18"
            active-color="#05a6f0"
            inactive-color="#dcdee0"
          />
        </div>
        <div class="item">
          <img src="@/assets/img/file_pdf_ico.png" />
          <p>
            <span>我的附件简历</span>
            <!-- 审核通过 -->
            <span v-if="true">上传时间：2024-6-12</span>
            <!-- 审核中 -->
            <span v-if="false">简历审核中</span>
            <!-- 审核失败 -->
            <span style="color: red" v-if="false">简历审核失败，失败原因</span>
          </p>
          <van-icon
            name="ellipsis"
            color="#666"
            size="20"
            @click="show_operate = true"
          />
        </div>
      </div>

      <!-- 说明 -->
      <div class="explain">
        <span>温馨提示：</span>
        <span>
          1.当你已同意投递简历时同时投递你的附件简历，招聘方才能看到你的附件简历；
        </span>
        <span>
          2.附件简历中不能含有二维码或者其它违规信息；如在使用过程中遇到问题，请联系<span>在线客服</span>。
        </span>
      </div>

      <!-- 已上传-重新上传:审核失败时出现 -->
      <div class="exist-anew" v-if="false">
        <span>重新上传</span>
      </div>
    </div>

    <!-- 上传附件时同时投递提醒 -->
    <van-popup
      v-model="show_operate"
      position="bottom"
      :style="{ background: 'none' }"
    >
      <div class="show_operate">
        <p>
          <span>预览</span>
          <span class="delete">删除附件简历</span>
        </p>
        <p>
          <span class="cancel" @click="show_operate = false">取消</span>
        </p>
      </div>
    </van-popup>
  </div>
</template>
  
  <script>
import NavBar from "@/components/NavBar.vue";
import { Switch, Icon, Popup } from "vant";
export default {
  name: "ResumeFile",
  components: {
    NavBar,
    [Switch.name]: Switch,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
  },
  props: ["title"],
  // 定义属性
  data() {
    return {
      checked: true,
      show_operate: false,
    };
  },
  // 方法集合
  methods: {},
};
</script>
  
  <style>
.resume-annex {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 46px);
  padding-top: 46px;
}

.resume-annex .exist-anew {
  display: flex;
  flex-direction: column;
  padding: 12px 18px;
  background-color: #fff;
}

.resume-annex .exist-anew span {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  border-radius: 6px;
  background-color: #f66;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}

.resume-annex .explain {
  display: flex;
  flex-direction: column;
  padding: 20px 15px;
}

.resume-annex .explain span {
  font-size: 12px;
  color: #aaa;
  line-height: 1.7;
}

.resume-annex .explain span span {
  padding: 0 2px;
  font-weight: 500;
  color: #05a6f0;
  text-decoration: underline;
}

.resume-annex .null {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 15px;
}

.resume-annex .null p.tag {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.resume-annex .null p.tag b {
  font-size: 20px;
  color: #111;
}

.resume-annex .null p.tag span {
  padding: 8px 0 16px;
  font-size: 12px;
  color: #888;
}

.resume-annex .null p.btn {
  display: flex;
  align-items: center;
  padding: 15px 15px 15px 17px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 0 15px rgba(102, 102, 102, 0.06);
}

.resume-annex .null p.btn i.icon {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 10px;
  background-color: #f4f4f4;
}

.resume-annex .null p.btn i.icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 14px;
  border: 1.8px solid #05a6f0;
  border-radius: 3px;
  transform: translate(-50%, -50%);
}

.resume-annex .null p.btn i.icon::after {
  content: "";
  position: absolute;
  bottom: 11px;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 3px;
  background-color: #05a6f0;
  transform: translateX(-50%);
}

.resume-annex .null p.btn span {
  display: flex;
  flex: 1;
  font-size: 16px;
  color: #333;
  line-height: 1;
}

.resume-annex .exist-show {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.resume-annex .exist-show .switch {
  display: flex;
  height: 40px;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  background-color: #fff;
}

.resume-annex .exist-show .switch span {
  font-size: 14px;
  color: #aaa;
}

.resume-annex .exist-show .item {
  display: flex;
  align-items: flex-end;
  padding: 18px 15px;
  border-radius: 8px;
  margin: 15px;
  background-color: #fff;
}

.resume-annex .exist-show .item img {
  display: flex;
  flex: 0 0 36px;
  height: 44px;
}

.resume-annex .exist-show .item p {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  height: 38px;
  padding: 3px 0;
  margin: 0 12px;
  line-height: 1;
}

.resume-annex .exist-show .item p span {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.resume-annex .exist-show .item p span + span {
  font-size: 12px;
  font-weight: 400;
  color: #b8b8b8;
}

.show_operate {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.show_operate p {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background-color: #fff;
  overflow: hidden;
}

.show_operate p + p {
  margin-top: 10px;
}

.show_operate p span {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 52px;
  font-size: 18px;
  color: #333;
}

.show_operate p span + span {
  border-top: 0.5px solid #eee;
}

.show_operate p span.delete {
  color: #f00;
}

.show_operate p span.cancel {
  color: #aaa;
}
</style>
  